<template>
  <!--用户登陆界面-->

  <div id="login">
    <div id="myForm">
      <span id="fromTitle" class="animate__animated animate__slideInDown">日程清单登陆</span>
      <el-form ref="loginForm"
               class="loginFormStyle"
               :model="loginForm"
               :rules="rules">
        <el-form-item prop="username" class="animate__animated animate__slideInLeft">
          <el-input v-model="loginForm.username"
                    placeholder="请输入账号或者邮箱"
                    :readonly="isLogin"
                    class="inputStyle"></el-input>
        </el-form-item>

        <el-form-item prop="password" class="animate__animated animate__slideInRight">
          <el-input v-model="loginForm.password"
                    placeholder="请输入密码"
                    prop="password"
                    show-password
                    :readonly="isLogin"
                    class="inputStyle"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="userLogin('loginForm')"
                     type="primary"
                     :loading="isLogin"
                     class="loginStyle animate__animated animate__slideInUp">{{loginText}}</el-button>
        </el-form-item>

        <el-link href="/singIn" type="primary" class="singInStyle">立即注册</el-link>
        <el-link href="/ChangePassword" type="primary" class="forgetPassword">忘记密码</el-link>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Input,Form } from 'element-ui';
export default {
  name: "login",
  components:{
    Input,
    Form,
  },
  data:()=>({
    loginForm:{
      username: '',
      password: '',
    },
    rules: {
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      ],
    },
    loginError: false,
    inputMargin: 4, //用来控制间距
    isLogin: false, //是否在登陆中
    loginText: '登陆', //登陆文字
  }),
  methods:{
    userLogin(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //登陆
          this.isLogin = true;
          this.loginText = "登陆中..."
          //上传参数
          let loginData = this.$qs.stringify({
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          //发送请求
          this.$axios({
            url: '/noteUser/userLogin',
            method: 'POST',
            data: loginData
          }).then( response =>{
            //修改按钮状态
            this.isLogin = false;
            this.loginText = "登陆"
            //登陆成功
            if (response.data.noteCode === 200){
              //将用户信息提交到全局
              this.$store.commit("setUserContext",response.data.noteClass)
              this.$router.push("/") //跳到主页面
              //提示用户登陆成功
              this.$message({
                message: response.data.noteMessage,
                type: 'success'
              });
              this.setCookie(1);
            }else{
              this.loginForm.password = ''; //清空密码
              this.$message.error(response.data.noteMessage);
            }
          }).catch( error =>{
            this.isLogin = false;
            this.loginText = "登陆"
            this.$message.error('请求超时...');
            console.log(error);
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //设置cookie
    setCookie (exdays) {
      let exdate = new Date()// 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)// 保存的天数
      // 字符串拼接cookie
      window.document.cookie = 'userid' + '=' + this.$store.state.userContext.userid + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userImg' + '=' + this.$store.state.userContext.userImg + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'name' + '=' + this.$store.state.userContext.name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'username' + '=' + this.$store.state.userContext.username + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userEmail' + '=' + this.$store.state.userContext.userEmail + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userTel' + '=' + this.$store.state.userContext.userTel + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'userRole' + '=' + this.$store.state.userContext.userRole + ';path=/;expires=' + exdate.toGMTString()
    },

  }
}
</script>

<style scoped>
  #login{
    width: 100%;
    height: 100%;
    background: url("../../assets/background.png");
  }
  #myForm{
    position:absolute;
    left:50%;
    top:50%;
    width: 400px;
    height: 260px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 10px;
    transform: translate(-50%, -50%);
  }

  .loginFormStyle{
    width: 100%;
    height: 100%;
    padding-left: 10%;
  }
  #fromTitle{
    font-size: 18px;
    margin-left: 10%;
    display: block;
    margin-bottom: 10px;
    width: 80%;
    color: #cccccc;
    border-bottom: 1px solid #ccc;
  }
  .inputStyle{
    width: 90%;
  }
  .loginStyle{
    width: 90%;
    height: 40px;
  }
  .singInStyle{
    float: right;
    margin-right: 10%;
  }
  .tipFont{
    font-size: 13px;
    color: #f40;
    margin-top: 1px;
  }
  /*忘记密码*/
  .forgetPassword{
    float: left;
  }

</style>
